<template>
	<view class="h100">
		<scroll-view v-if="sarr.length" class='ws-n p03 sarr bf pt10'  scroll-x='true'>
			<block v-for="(v,i) in sarr" :key='i'>
				<view @click="clickSarr(i)" class='f-g-0 mr15 bs10 c6 dis-in sarri f28 t-c' :class="{wei:v.active}" :style="{background:v.active?`rgba(${cTR(tColor)},1)`:'',color:v.active?'#fff':'#000'}">{{v.name}}</view>
			</block>
		</scroll-view>
		<scroll-view class="h100" scroll-y @refresherrefresh="refresh" refresher-enabled :refresher-triggered='downPull'>
			<view class="tables p32 pb115">
				<view v-for="table in tables" :key="table.id" class="table bs20 mb30 bf" @click="dine(table)">
					<!-- 桌台状态 -->
					<view class="f-bt p1 cf" :style="getTableState(table.state).color">
						<view class="t-r wei cf" >{{table.name}}</view>
						<view class="t-l">{{table.maxNum}}</view>
					</view>
					<view class="t-c">
						<view class="f36 mt30">{{getTableState(table.state).text}}</view>
						<view>{{getTiming(table)}}</view>
					</view>
				</view>
			</view>
		</scroll-view >
		
	</view>
</template>

<script>
	import {
		utilMixins
	} from "@/common/util-mixins.js"
	export default {
		props:{
			areaId:{
				type:[String,Number],
				default:function(){
					return 0
				}
			},
			updataId:{
				type:[String,Number],
				default:function(){
					return 0
				}
			}
		},
		data(){
			return{
				tablesIndex:0,
				downPull:false,
				sarr: [],
				tables:[]
			}
		},
		created() {
			this.getTables()
			uni.$on(`tableListRefresh${this.areaId}`,this.getTables)
		},
		watch:{
			updataId:{
				handler(val){
					if(val == this.areaId){
						this.getTables()
					}
				}
			}
		},
		mixins: [utilMixins],
		methods:{
			getTiming(table){
				let text = ''
				if(table.state === '3'){
					// 2021/6/24 精确到秒 300年后失效
					var time = Date.parse( new Date() ).toString().substr(0,10) - table.orderInfo.receiptAt
					time = time < 0 ? 0 : time
					var day = Math.floor(time/3600/24)
					var hour = Math.floor((time/3600)%24)
					var min = Math.floor((time%3600)/60)
					if(day>0){
						text = day + '天' + hour + '小时' + min + '分钟'
					}else if(hour>0){
						text =hour + '小时' + min + '分钟'
					}else{
						text = min + '分钟'
					}
				}
				return text
			},
			getTableState(state){
				// 1.未开台2已开台3.就餐中
				let text = ''
				let color = ''
				switch(state){
					case '1' :
						text = '未开台',
						color="background:#bbb"
						break;
					case '2' :
						text = '已开台',
						color="background:#53c7a0"
						break;
					case '3' :
						text = '就餐中',
						color="background:#feb101"
						break;
					default:
						break;
				}
				return {
					text,
					color
				}
			},
			async refresh(){
				this.downPull = true
				await this.getTables()
				this.downPull = false
			},
			getTables(){
				return new Promise(async (resolve)=>{
					try{
						let {data} = await this.util.request({
							'url': this.api.tableList,
							data:{
								areaId:this.areaId
							}
						})
						this.sarr = []
						data.map((tableType,index) =>{
							this.sarr.push({
								name: tableType.name,
								active:false,
								tableInfo:tableType.tableInfo
								
							})
						})
						let index = this.tablesIndex
						this.sarr[index].active = true
						this.tables = this.sarr[index].tableInfo
					}catch(e){
						this.util.message(e.msg, 3)
					}
					resolve()
				})
				
			},
			dine(table){
				let url = '/yb_shd/dp/OrderDine/statement?tableId=' + table.id + '&type=dineIn'
				//只要不是 就餐中 就跳点单页
				if(table.state != '3'){
					url = '/yb_shd/dp/OrderDine/quick-order?tableId=' + table.id + '&tableName=' + table.name
				}
				this.go({
					t:1,
					url:url
				})
			},
			clickSarr(index){
				this.tablesIndex = index
				this.tables = this.sarr[index].tableInfo
				this.sarr.forEach((item,i) =>{
					if(i === index){
						item.active = true 
					}else{
						item.active = false 
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.tables{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		.table{
			width: 220rpx;
			height: 250rpx;
			margin-right: 25rpx;
		}
		.table:nth-child(3n+3){
			margin-right: 0rpx;
		}
	}
	.sarr {
		height: 84rpx;
	
		.sarri {
			background: #F8F8F6;
			line-height: 64rpx;
			width: 158rpx;
			height: 64rpx;
		}
	}
	
</style>
